<template>
	<view class="container">
		<!-- 第一块内容 -->
		<view class="section first-section">
			<view class="header-container">
				<!-- 左侧标题 -->
				<text class="header-title">活动头条</text>

				<!-- 中间分割线 -->
				<view class="divider"></view>

				<!-- 右侧活动信息 -->
				<view class="activity-list">
					<view v-for="(item, index) in seele.page_conf.act_top" :key="index" class="activity-item">
						<view class="activity-bullet"></view>
						<view class="activity-tag">{{ item.left }}</view>
						<text class="activity-info">{{ item.right }}</text>
					</view>
				</view>
			</view>
		</view>


		<!-- 第二块内容 -->
		<view class="section second-section" :style="{'background':'url('+$wanlshop.oss(seele.page_conf.coupon_img_1,0,0)+') center center no-repeat;'}">

			<!-- 文字内容容器 -->
			<view class="banner-content">
				<text class="banner-title">活动券/门票</text>
				<view class="experience-btn" @tap="go_to_buy('COUPONS')">立即体验</view>
			</view>
		</view>

		<!-- 第三个 -->
		<view class="section third-section" :style="{'background':'url('+$wanlshop.oss(seele.page_conf.coupon_img_2,0,0)+') center center no-repeat;'}">

			<!-- 文字内容容器 -->
			<view class="banner-content">
				<text class="banner-title">购票中心</text>
				<view class="experience-btn" @tap="go_to_buy('TICKETS')">立即体验</view>
			</view>
		</view>

		<!-- 第四个 -->
		<view class="section four-section">
			<view class="notice-container">
				<text class="notice-title">购票须知</text>

				<view class="notice-content" v-for="(item, index) in seele.page_conf.buy_notice" :key="index" >
					<!-- 左侧标签 -->
					<view class="notice-tag">{{item.left}}</view>

					<!-- 右侧内容 -->
					<text class="notice-text">{{item.right}}</text>
					
				</view>
				
			</view>
		</view>
		 <view class="section image-section" v-if="seele.page_conf.adv_img">
		      <image 
		        class="full-image"
		        :src="$wanlshop.oss(seele.page_conf.adv_img,0,0)"
		        mode="scaleToFill"
		        lazy-load
		        @click="handleImageClick"
		        @error="handleImageError"
		      />
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		computed: {...mapState(['seele'])},
		data() {
			return {
			}
		},
		created(){
			this.$store.dispatch('seele/loadCouponPageConf',{});
		},
		methods: {
			go_to_buy(filter){
				uni.navigateTo({
					url:"/pages/dispatch/shop/placePage?filter="+filter
				})
				// shop/placePage
			},
			handleImageClick() {
			  // 图片点击事件处理
			  uni.navigateTo({
				url: '/pages/detail/imageDetail'
			  });
			},
			handleImageError(e) {
			  console.error('图片加载失败:', e);
			  this.$set(this, 'imageUrl', '@/static/default-banner.jpg');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #F5F5FA;
		padding: 10rpx;
	}

	.section {
		border-radius: 25rpx;
		margin: 20rpx 10rpx;
		background-color: #FFFFFF;

		&.first-section {
			padding: 20rpx;
			// height: 100rpx; // 根据实际需要调整高度
		}

		&.second-section {
			padding: 20rpx;
			height: 324rpx; // 根据图片比例调整
			// background: url("https://www.lichu2025.cn/uploads/20250315/286c2b0d8a8e639b888bc0b22728bab6.jpg") center center no-repeat;
			background-size: 100% 100%;
		}

		&.third-section {
			padding: 20rpx;
			height: 324rpx; // 根据图片比例调整
			// background: url("https://www.lichu2025.cn/uploads/20250315/14dd2274a018cc8e14403abb252278fb.jpg") center center no-repeat;
			background-size: 100% 100%;
		}

		&.four-section {
			padding: 20rpx;
			background-color: #ffffff;
		}
		&.image-section {
		  height: 236rpx; // 根据需求调整高度
		}
	}

	.header-container {
		display: flex;
		align-items: center;
	}

	.header-title {
		width: 70rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #CB423B;
	}

	.divider {
		width: 2rpx;
		height: 60rpx;
		background-color: #ccc;
		margin: 0 30rpx;
	}

	.activity-list {
		flex: 1;
	}

	.activity-item {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.activity-bullet {
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
		background-color: #CB423B;
		margin-right: 15rpx;
	}

	.activity-tag {
		background-color: #CB423B;
		color: white;
		padding: 4rpx;
		border-radius: 6rpx;
		font-size: 20rpx;
		margin-right: 15rpx;
		width: 52rpx;
		text-align: center;
	}

	.activity-info {
		font-size: 24rpx;
		color: #666;
	}

	.banner-content {
		margin: 74rpx 43rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.banner-title {
		font-size: 40rpx;
		color: #fff;
		text-shadow: 1rpx 1rpx 4rpx rgba(0, 0, 0, 0.2);
		margin-bottom: 30rpx;
	}

	.experience-btn {
		background-color: #CB423B;
		color: #fff;
		padding: 12rpx 40rpx;
		border-radius: 15rpx;
		font-size: 28rpx;
		box-shadow: 0 4rpx 12rpx rgba(255, 68, 68, 0.3);
		transition: all 0.3s;

		&:active {
			transform: scale(0.95);
			opacity: 0.9;
		}
	}
	
	.notice-container {
	  padding: 20rpx;
	  border-radius: 16rpx;
	}
	
	.notice-title {
	  display: block;
	  font-size: 34rpx;
	  font-weight: bold;
	  color: #333;
	  margin-bottom: 30rpx;
	  padding: 8rpx 20rpx;
	}
	
	.notice-content {
	  margin: 25rpx;
	  display: flex;
	  align-items: center;
	}
	
	.notice-tag {
	  text-align: center;
	  width: 160rpx;
	  border: 2rpx solid #CB423B;
	  border-radius: 8rpx;
	  color: #CB423B;
	  font-size: 23rpx;
	  padding: 8rpx 20rpx;
	  margin-right: 30rpx;
	}
	
	.notice-text {
		width: 400rpx;
	  font-size: 26rpx;
	}
	
	.full-image {
	  width: 100%;
	  height: 100%;
	  transition: transform 0.3s ease;
	  
	  &:active {
	    transform: scale(0.98);
	  }
	}
</style>